<!--
     新增用户
-->
<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="width" :before-close="handleClose">
    <slot name="content">
      <el-table
        :data="tableData"
        height="500"
        highlight-current-row
        style="width: 100%"
        default-expand-all
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="80" />

        <el-table-column type="expand">
          <template #default="props">
            <div style="padding-left: 80px">
              <el-table :data="props.row.children">
                <el-table-column label="商品名称" prop="name" />
                <el-table-column label="商品编号" prop="state" />
                <el-table-column label="零售价" prop="city" />
                <el-table-column label="会员价" prop="address" />
                <el-table-column label="数量" prop="zip" />
              </el-table>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="code" label="商品编号" />
        <el-table-column prop="price" label="零售价" />
        <el-table-column prop="vipPrice" label="会员价" />
        <el-table-column prop="amount" label="数量" />
        <el-table-column prop="total" label="小计" />

        <el-table-column fixed="right" label="操作" min-width="80">
          <template #default="scope">
            <el-button type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" @click="submitForm(formRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, toRefs, reactive } from 'vue'
import type { FormInstance } from 'element-plus'

const Pose = defineProps({
  title: {
    type: String,
    default: '系统提示'
  },
  width: {
    type: String,
    default: '60%'
  }
})
const state = reactive({
  title: Pose.title,
  width: Pose.width,
  tableData: [
    {
      id: '344',
      name: '感冒药231312soadjoia',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00',
      children: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114'
        }
      ]
    },
    {
      id: '366',
      name: '感冒药23492834',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00'
    }
  ]
})

// const { title, width, tableData } = toRefs(state)

const dialogVisible = ref(false)
const emits = defineEmits(['confirm'])
const handleSelectionChange = (val: any) => {
  console.log(val)
}
//关闭
const onClear = () => {
  hide()
}

//清除
const show = () => {
  dialogVisible.value = true
}

//清除
const hide = () => {
  dialogVisible.value = false
}
//点击
const handleClose = () => {
  hide()
}

const formRef = ref<FormInstance>()
const ruleForm = reactive<{
  name: string
  phone: string
  icCode: string
}>({
  name: '',
  phone: '',
  icCode: ''
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      emits('confirm', formRef.value)
      hide()
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//删除行
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

defineExpose({
  show,
  hide
})
</script>
